<template>
  <h1>声明周期</h1>
  <div>{{ name }}</div>
  <!-- <HelloWorld v-if="hide">
       <slot></slot>
   </HelloWorld> -->
  <div>
    <router-link to="/che" v-if="hide">11</router-link>
    <router-view v-if="hide"></router-view>
  </div>
  <HelloWorld></HelloWorld>
  <button @click="updata">更新</button>
  <button @click="del">隐藏</button>
  <div>{{ qj }}</div>
</template>
<script>
import {
  inject,
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onUnmounted,
  onUpdated,
  provide,
  ref,
} from "vue";
export default {
  setup() {
    let name = ref("张三");
    let hide = ref(true);
    let qj = inject("name");
    // provide和inject也可以实现组件通讯
    provide('arknight','阿米娅')
    console.log("setup方法相当与创建");
    // 跟新
    function updata() {
      name.value = "李四";
    }
    // 卸载
    function del() {
      hide.value = !hide.value;
    }
    onBeforeMount(() => {
      console.log("挂载前");
    });
    onUnmounted(() => {
      console.log("挂载后");
    });
    onBeforeUpdate(() => {
      console.log("更新前");
    });
    onUpdated(() => {
      console.log("更新后");
    });
    onBeforeUnmount(() => {
      console.log("卸载前");
    });
    onUnmounted(() => {
      console.log("卸载后");
    });
    return { name, updata, hide, del, qj };
  },
};
</script>